<template>
  <div>
    <Modal
      v-model="rechargeBox"
      title="充值中心"
      :footer-hide="true"
      :mask-closable="false"
      width="750"
      @on-visible-change="vChange"
    >
      <div class="paddingLi">
        <Row class="f_16 marginB20">
          <Col span="4">
            当前账号：
          </Col>
          <Col span="20">
            {{otWx()}}
          </Col>
        </Row>
        <Row class="f_16 marginB20">
          <Col span="4" class="marginT5">
            充值套餐：
          </Col>
          <Col span="20">
            <Button :type="(active==i)?'primary':'default'" class="marginR20 marginB10" size="large"  
              v-for="(val,i) in recharge" :key="i" 
              @click="choose(i)"
            >{{val.remark}}</Button>
            <div class="cRed f_14">猫币除官费外，可以1:1抵扣服务费。</div>
          </Col>
        </Row>
        <Row class="f_16 marginB20">
          <Col span="4">
            支付方式：
          </Col>
          <Col span="20">
            <Button :type="(zFactive==i)?'primary':'default'"  :ghost="zFactive==i" class="marginR20 marginB10" size="large"  
              v-for="(val,i) in rechargeType" :key="i" 
              @click="zFChoose(val.type)"
            >
              <i 
                :class="'iconfont '+val.cName"
              >
              </i>
              {{val.name}}
            </Button>
            <span class="f_14 cCCC relative" style="top:-3px;" v-show="alipayIng">
              正在生成支付...
            </span>
          </Col>
        </Row>
        <div class="textCenter" v-show="zFactive==0">
          <div 
            class="blockCenter marginB20"
            style="width:200px;height:200px;"
          >
            <img class="width100 height100" :src="rechargeCode" v-show="$app.judgeData(rechargeCode)" />
            <div v-show="$app.judgeData(rechargeCode)" class="c999">2分钟内有效</div>
            <div class="paddingT10  cCCC pointer" @click="zLai"  v-show="!$app.judgeData(rechargeCode)">
              <Icon type="md-refresh" class="marginB10 marginT10 cBlue" size="70"/>
              <div class="textCenter f_24">刷新支付码</div>
            </div>
          </div>
        </div>
      </div>
    </Modal>

    
  </div>
</template>

<style scoped>
  .iconzhifubao{color: #00aaef !important;}
  .iconweixinzhifu1{color: #32ae28 !important;}
</style>

<script>
export default {
  name: "rechargeBox",
  components: {},
  props: ['userPower', 'companyAll'],
  data() {
    let data = {
      rechargeCode:'',
      recharge:$app.getSession('bigSetting').recharge,

      //支付类型
      rechargeType:[
        {name:'微信支付',type:0,cName:'iconweixinzhifu1'},
        {name:'支付宝',type:1,cName:'iconzhifubao'},
      ],
      zFactive:null,//0微信支付 1支付宝
      alipayIng:false,
    };

    let tool={
      timeDown:null,//定时请求器

      active:0,
      //支付框组件 是否显示
      rechargeBox:false
    };
    return Object.assign(data, tool);
  },
  created(){
    if($app.rBoxDo()){
      this.zLai();//显示弹框
      this.vChange(true);//更新数据
    }
  },
  mounted() {
  
  },
  methods: {
    //用户信息返回
    otWx(){
      let out='';
      let {
        userPower,companyAll
      }=this;
      if($app.judgeData(companyAll) && companyAll.state>0){
        out=companyAll.company_name;
      }else{
        out=(userPower.mobile||userPower.name);
      }
      return out;
    },
    zFChoose(i){
      let that=this;
      let {
        active,//充值金额
        zFactive//0微信 1支付宝
      }=this;
      (zFactive!=i) && (this.zFactive=i);//不等 才 赋值

      that.zFactive=i;//赋值
      console.log(zFactive,i)
      if(zFactive==i && i==0){
        console.log('微信支付自己点自己，毛都不做')
      }else{
        if(i==0){
          this.choose(active);
        }else{//支付宝
          this.alipayFun();
        }
      }
      

    },
    //支付宝函数走起
    alipayFun(){
      let that=this;
      let {
        recharge,
        active
      }=that;
      let money=recharge[active].money;
      this.alipayIng=true;

      // 清空微信的定时器
      this.initTime(()=>{
        this.rechargeCodeGo(money,({url,order_id})=>{

          //把金额存在本地，第二个页面调用时候，可知道充值了多少钱
          $app.setSession(money,'alipayMoney');
          $app.setSession(window.location.href,'alipayUrl');
          $app.setSession(1,'alipayType');//1充值，2单笔支付


          $ajax.aliWebPay(order_id,({alipay_url})=>{
            this.alipayIng=false;
            $app.openWindow(alipay_url);
            $app.confirm('支付已完成？','温馨提示',{
              yesText:'已完成',
              yesFun:()=>{
                $app.loading();
                $ajax.isPayed(order_id,(buEr)=>{
                  if(buEr==true){//充值成功
                    this.rechargeBox=false;//关闭支付框
                    $app.toast('支付成功',true);
                  }else{
                    $app.alert('数据更新中，请稍后刷新页面再试。','温馨提示',()=>{
                      this.rechargeBox=false;//关闭支付框
                    });
                  }
                });
              },
              noText:'否',
              noFun:()=>{
                this.zFactive=null;
              }
            })
          });
        });
      });
    },
    choose(i){
      let that=this;
      let {
        timeDown,
        recharge,
        zFactive//哪种支付方式 0微信 1支付宝
      }=that;


      //初始化所有
      that.rechargeBox=true;
      that.active=i;
      that.rechargeCode='';


      // 选中状态是 微信，才继续逻辑
      if(zFactive == 0){
        let money=recharge[i].money;

        console.log('timeDown 倒计时函数 = ',timeDown)

        if($app.judgeData(timeDown)){
          clearInterval(timeDown);//清空定时器
          that.timeDown=null;
        }

        // 生成充值订单id
        this.rechargeCodeGo(money,({url,order_id})=>{
          that.rechargeCode=url;
          console.log('二维码重新刷了一遍')
          


          //开始定时请求器 3秒钟请求一次
          let time = 40;//40x3 请求2分钟
          //设置定时器 每1秒钟 执行一次
          let timeDown = setInterval(() => {
            

            $ajax.isPayed(order_id,(buEr)=>{
              console.log('剩余 = ',time)
              //time自身减1
              time--;

              if(buEr==true){//充值成功
                that.initTime();
                that.rechargeBox=false;//关闭支付框
                $app.toast('支付成功',true);
                
              }else if(time <= 0){//清空定时器
                that.initTime();
                that.choose(that.active);

              }else{
                console.log('用户没有扫码 =》 逻辑继续')
              }
              
            });
            
          }, 3000);

          that.timeDown=timeDown;//定时器赋值给全局

        });
      }
      
    },

    // 生成充值订单id
    rechargeCodeGo(money,callBack){
      $ajax.rechargeCode(money,resData=>{
        callBack(resData)
      });
    },

    vChange(buEr){
      if(!buEr){//关闭弹框
        this.initTime();
        
        //支付框专用 有用到payBox.vue组件的页面 或 payZL.vue组件
        if(!!this.$parent.payBox){//而且payBox必须为true
          
          //上一级需要有 payBox字段 vPayChange函数
          this.$parent.vPayChange(true);
          
        }else{//企业信息页 =》父级页面是 userSmall，的父级页面是accountInfo
          // 执行父亲的方法
          this.$parent.$emit('up_cAll');
        
          if ($app.rBoxDo()){
            $app.closeHadPage("accountInfo"); //更新完成关闭本页
          }
        };
      }else{//显示弹框
        //初始化数据
        this.active=0;//充值金额
        this.zFactive=null;//哪种支付方式
        this.alipayIng=false;
      };
    },

    //重新获取二维码
    zLai(){
      this.choose(0);
    },

    // 支付框初始化所有
    initTime(callBack){
      let that=this;
      let {timeDown}=that;
      that.rechargeCode='';
      // that.active=9999;//4个9，目的是为了到时见了，active没有了，要重新选一次

      console.log('-----------进入清空定时器-----------');
      clearInterval(timeDown);//清空定时器
      that.timeDown=null;
      console.log('-----------清空完毕-----------');
      callBack instanceof Function && callBack();
    }
  }
};
</script>

